<template>
  <div class="dynamic-wrapper">
    <div :style='`background-image: url(${bgImg})`' class="dynamic-content-wrapper">
      <div class="dynamic-bg">
        <div v-if="showLoading"  class="showLoadingImg">
          <img src="/img/loading.gif" alt="">
          <span>正在努力加载中…</span>
        </div>
      </div>
      <div v-if="!showLoading" class="dynamic-content">
        <div class="title-wrapper">
          <h3 class="title">公司动态</h3>
          <div class="click-more" @click="toNews">
            <span class="click-text">查看更多</span>
            <span class="icon-youjiantou"></span>
          </div>
        </div>

        <!-- 公司动态新版 -->
        <div class="danamic-detailinfo">
          <div class="detailinfo-left">
            <div class="detailinfo-pic" @click="toNewsDetail(setTop.id)">
              <img :src="setTop.img"/>
            </div>
            <div class="detail-mark"><span>国科新闻</span>{{formatData(setTop.publishDate)}}</div>
            <a class="detail-descript" @click="toNewsDetail(setTop.id)">{{setTop.title}}</a>
            <div class="click-more">
              <p class="text" @click="toNewsDetail(setTop.id)">查看详情</p>
              <i class="line"></i>
            </div>
          </div>
          <div class="detailinfo-right">
            <div class="right-item" v-for="(item, index) in dynamicList" :key="index">
              <div class="item-one"><span>国科新闻</span>{{formatData(item.publishDate)}}</div>
              <a class="item-title"  @click="toNewsDetail(item.id)">{{item.title}}</a>
            </div>
          </div>
        </div>

        <!-- 公司动态旧版 -->
        <!-- <div ref="danamic" class="danamic-banner"> -->
            <!-- 轮播 -->
            <!-- <ul class="banner-wrapper">
              <li class="banner-item-wrapper" v-for="(item, index) in dynamicList" :key="index">
                <div class="banner-item-content">
                  <div class="banner-item-left">
                    <img  @click="toNewsDetail(item.id)" ref="danamic-img" :src="item.img" :alt="item.title">
                  </div>
                  <div class="banner-item-right">
                    <h3  @click="toNewsDetail(item.id)" class="banner-title">{{item.title}}</h3>
                    <p class="time">{{formatData(item.updateDate)}}</p>
                    <p class="text-content">{{item.descript}}</p>
                    <div class="click-more">
                      <p class="text" @click="toNewsDetail(item.id)">查看详情</p>
                      <i class="line"></i>
                    </div>
                  </div>
                </div>
              </li>
            </ul> -->
            <!-- 按钮 -->
            <!-- <div class="prev btn">
              <span class="icon-zuojiantou"></span>
            </div>
            <div class="next btn">
              <span class="icon-youjiantou"></span>
            </div>
        </div> -->

      </div>
    </div>
  </div>
</template>

<script>
import {HomeNewsIndexlist} from '@/api/getData'
import { dynamicBanner } from '@/api/banner'
export default {
  data(){
    return {
      dynamicList: [],
      showLoading: true,
      bgImg: '/img/home/company-trendsbg.jpg',
      timer: 0,
      setTop:{}
    }
  },
  mounted(){
    let that = this

    this.$set(this, 'showLoading', true)
    // HomeNewsIndexlist.call(this, 10).then(res => {
    //   that.$set(that, 'dynamicList', res)
    //   that.$set(that, 'showLoading',false)
      // that.$nextTick(()=>{
      //   that.dynamicFn.call(that)
      // })
      HomeNewsIndexlist.call(this, 60).then(msg => {
        that.$set(that, 'showLoading',false)
        // msg.push(msg[0])
        let list=msg.sort(this.compare("remarks")),
            newList=[];
        for(let i=0;i<list.length;i++)
        {
          this.setTop=list[0]
          if(i!=0 && i<5)
          {
            newList.push(list[i])
          }
        }
        that.$set(that, 'dynamicList', newList)
        clearInterval(that.timer)
        // that.$nextTick(()=>{
        //   that.dynamicFn.call(that)
        // })
      })
    // })
  },
  methods: {
    compare(property){
      return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
      }
    },
    toNews(){
      this.$router.push({
        name: 'about-news'
      })
    },
    toNewsDetail(id){
      this.$router.push({
        path: "/about/detail/"+id,
        query: {
          current:1
        }
      })
    },
    formatData(data){
      if(data)
      {
        return data.split(' ')[0]
      }
    },

    dynamicFn(sign){
      let that = this
      setTimeout(() => {
        let danamic = this.$refs['danamic']
        dynamicBanner.call(that, danamic)


        window.onresize = function(){
            danamic = that.$refs['danamic']
            clearInterval(that.timer)
            dynamicBanner.call(that, danamic)
        }
      })



    }
  },
}
</script>

<style lang="stylus" scoped>
// @import '~style/reset.styl';

.dynamic-content-wrapper{
  position: relative;
  width: 100%;
  height: 716px;
  background-size: 100% 100%;
  @media (min-width: 1640px){
    height:947px;
  }

  .dynamic-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgba(0,0,0,.85)
    text-align: center;

    .showLoadingImg{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 336px;
      height: 144px;
      padding-top: 50px;
      margin: -72px 0 0 -188px;
      background-color: #fff;
      text-align: center;
      img, span{
        width: 44px;
        height: 44px;
        vertical-align: middle;
      }
      span{
        margin-left: 30px;
        font-size: 18px;
      }
    }
  }

  .dynamic-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .title-wrapper{
      width: 1200px;
      margin: 98px auto 0;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      @media (min-width: 1640px){
        width: 1480px;
        margin: 127px auto 0;
      }

      .title{
        display: inline-block;
        font-size: 36px;
        line-height: 36px;
        @media (min-width: 1640px){
          display: inline-block;
          font-size: 48px;
          line-height: 48px;
        }
      }

      .click-more{
        display: inline-block;
        margin-left: 455px;
        vertical-align: -5px;
        font-size: 14px;
        cursor: pointer;
        &:hover
        {
          .icon-youjiantou{
            margin-right: 0px;
            margin-left:30px
          }
        }
        .icon-youjiantou{
          // margin-left: 1px;
          vertical-align: -2px;
          transition: margin .25s;
          margin-right:30px
        }

        // .click-text:hover + .icon-youjiantou{
        //   margin-left: 28px;
        // }
      }
    }

    .danamic-detailinfo
    {
      display:flex;
      width: 1200px;
      margin:50px auto 0;
      justify-content:space-between
      @media (min-width: 1640px){
        width: 1480px;
        margin:80px auto 0
      }
      .detailinfo-left
      {
        .detailinfo-pic
        {
          width:480px;
          height:240px;
          cursor:pointer;
          overflow: hidden;
          box-shadow:0px 20px 40px 0px rgba(0,0,0,0.6);
          @media (min-width: 1640px){
            width:640px;
            height:320px
          }
          img 
          {
            width:100%;
            height:100%;
            object-fit:cover;
            transition: transform .25s;
          }
          
          &:hover img{
            transform: scale(1.2)
          }
        }
        .detail-mark
        {
          font-size:14px;
          font-family:MicrosoftYaHei;
          color:rgba(130,130,130,1);
          margin-top:40px
          span 
          {
            margin-right:20px
          }
        }
        .detail-descript
        {
          width:480px;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size:20px;
          font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
          font-weight:bold;
          color:rgba(255,255,255,1);
          margin-top:20px;
          cursor:pointer;
          line-height:30px
          @media (min-width: 1640px){
            font-size:24px;
            width:640px;
            line-height:34px
          }
        }
        .click-more{
          position: absolute;
          width: 120px;
          height: 44px;
          cursor: pointer;
          margin-top:43px;

          .text{
            position: relative;
            font-size:18px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            text-align: center;
            line-height: 44px;
            color:rgba(255,255,255,1);
            z-index: 1;
          }

          .line{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 22px;
            background-color: #1457FD;
            transition: height .25s
          }

          &:hover .line{
            height: 44px;
          }
        }
      }
      .detailinfo-right
      {
        width:650px;
        @media (min-width: 1640px){
          width:700px;
        }
        .right-item
        {
          padding:30px 0;
          border-bottom:1px solid #525252
          @media (min-width: 1640px){
            padding:40px 0;
          }
          .item-one
          {
            font-size:14px;
            font-family:MicrosoftYaHei;
            color:rgba(130,130,130,1);
            margin-bottom:20px;
            span 
            {
              margin-right:20px
            }
          }
          .item-title
          {
            font-size:18px;
            font-family:MicrosoftYaHei;
            color:rgba(255,255,255,1);
            width:650px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor:pointer
            @media (min-width: 1640px){
              width:700px;
              font-size:20px;
            }
          }
        }
      }
    }

    .danamic-banner{
      position: relative;
      width: 100%;
      height: 370px;
       margin-top: 60px;
      @media (min-width: 1640px){
        height: 460px;
        margin-top: 80px;
      }

      .banner-wrapper{
        // @extend .clear-fix;
        position: absolute;
        top: 0;
        left: 0;

        .banner-item-wrapper{
          float: left;
          color: #fff;
          // width: 1200px;
          //  @media (min-width: 1640px){
          //     width: 1920px;
          //   }

          .banner-item-content{
            // @extend .clear-fix;
            width: 1200px;
            margin: auto;

            @media (min-width: 1640px){
              width: 1480px;
            }

            .banner-item-left{
              float: left;
              width: 480px;
              height: 370px;
              margin-left: 106px;
              border: 20px solid #fff;
              overflow: hidden;
              box-shadow:0px 20px 36px 36px rgba(0,0,0,0.5);
              cursor: pointer;
              @media (min-width: 1640px){
                margin-left: 126px;
                width: 600px;
                height: 460px;
              }

              img{
                width: 100%;
                height: 100%;
                transition: transform .25s;
              }

              &:hover img{
                transform: scale(1.2)
              }
            }

            .banner-item-right{
              position: relative;
              float: left;
              width: 452px;
              height: 370px;
              margin-left: 60px;
              padding-top: 14px;
              @media (min-width: 1640px){
                height: 460px;
                width: 569px;
                padding-top: 20px;
              }

              .banner-title{
                font-size:24px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(255,255,255,1);
                line-height:44px;
                cursor: pointer;

              }

              .time{
                margin: 32px 0 30px 0;
                font-size: 14px;
                color: #828282;
                line-height: 14px;
                @media (min-width: 1640px){
                  margin: 32px 0 50px 0;
                }
              }
              .text-content{
                text-overflow: ellipsis;
                display: -webkit-box!important;
                -webkit-line-clamp: 2;
                overflow: hidden;
                -webkit-box-orient: vertical;
                width: 100%;
                font-size:14px;
                font-family:MicrosoftYaHei;
                color:#F5F5F5;
                line-height:34px;
              }
              .click-more{
                position: absolute;
                bottom: 20px;
                width: 120px;
                height: 44px;
                cursor: pointer;
                @media (min-width: 1640px){
                  bottom: 40px;
                }

                .text{
                  position: relative;
                  font-size:18px;
                  font-family:MicrosoftYaHei-Bold;
                  font-weight:bold;
                  text-align: center;
                  line-height: 44px;
                  z-index: 1;
                }

                .line{
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 22px;
                  background-color: #1457FD;
                  transition: height .25s
                }

                &:hover .line{
                  height: 44px;
                }
              }
            }
          }
        }

      }

      .btn{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        border: 2px solid #fff;
        text-align: center;
        line-height: 44px;
        margin-top: -22px;
        cursor: pointer;
        transition: all 0.25s;

        &:hover{
          background-color: #1457FD;
          border-color: transparent;
        }
      }
      .prev{
        margin-left: -608px;
        @media (min-width: 1640px){
          margin-left: -740px;
        }
      }
      .next{
        margin-left: 528px;
        @media (min-width: 1640px){
          margin-left: 696px;
        }
      }
    }
  }
}
</style>
